<template>
	<view>
		<uni-grid :column="3" :show-border="false" :square="false" @change="change">
			<uni-grid-item v-for="(listItem,listIndex) in list" :index="listIndex" :key="listIndex" v-if="(listItem.inward && userInfo) || !listItem.inward">
				<view class="grid-item-box" >
					<!-- <uni-icons custom-prefix="iconfont" type="icon-qingjia" size="30"></uni-icons> -->
					<image :src="listItem.src" style="width: 64rpx;height: 64rpx;"></image>
					<text class="text">{{listItem.title}}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default {
		name:'NineGrid',
		props:{
			list: {
				type: Array,
				default: null,
			},
	  },
		data() {
			return {
				title: 'Hello',
				description:'uView是uni-app生态专用的UI框架',
				closable:true
			}
		},
		computed:{
			...mapGetters({userInfo:'login/userInfo',wxAdmin:'login/wxAdmin'})
		},
		methods: {
			change(e){
				console.log('openLeave',e)
			
				this.$emit('goLeave',e.detail.index)
			}
		}
	}
</script>

<style lang="scss">
	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>
